<div class="page">
  <div class="navbar">
    <div class="navbar-bg"></div>
    <div class="navbar-inner sliding">
      <div class="left">
        <a class="link back">
          <i class="icon icon-back"></i>
          <span class="if-not-md">Back</span>
        </a>
      </div>
      <div class="title">Content Block</div>
    </div>
  </div>
  <div class="page-content">
    <p>This paragraph is outside of content block. Not cool, but useful for any custom elements with custom styling.</p>

    <div class="block-title">Block Title</div>
    <div class="block">
      <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
        Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis
        felis. </p>
    </div>

    <div class="block-title">Strong Block</div>
    <div class="block block-strong">
      <p>Here comes another text block with additional "block-strong" class. Praesent nec imperdiet diam. Maecenas vel
        lectus porttitor, consectetur magna nec, viverra sem. Aliquam sed risus dolor. Morbi tincidunt ut libero id
        sodales. Integer blandit varius nisi quis consectetur. </p>
    </div>

    <div class="block-title">Strong Outline Block</div>
    <div class="block block-strong block-outline">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates itaque autem qui quaerat vero ducimus
        praesentium quibusdam veniam error ut alias, numquam iste ea quos maxime consequatur ullam at a.</p>
    </div>

    <div class="block-title">Strong Inset Block</div>
    <div class="block block-strong inset">
      <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis
        tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
    </div>

    <div class="block-title">Strong Inset Outline Block</div>
    <div class="block block-strong block-outline inset">
      <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis
        tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
    </div>

    <div class="block-title">Tablet Inset</div>
    <div class="block block-strong medium-inset">
      <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis
        tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
    </div>

    <div class="block-title">With Header & Footer</div>
    <div class="block">
      <div class="block-header">Block Header</div>
      <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
        Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis
        felis. </p>
      <div class="block-footer">Block Footer</div>
    </div>

    <div class="block-header">Block Header</div>
    <div class="block">
      <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
        Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis
        felis. </p>
    </div>
    <div class="block-footer">Block Footer</div>

    <div class="block block-strong">
      <div class="block-header">Block Header</div>
      <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
        Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis
        felis. </p>
      <div class="block-footer">Block Footer</div>
    </div>

    <div class="block-header">Block Header</div>
    <div class="block block-strong">
      <p>Here comes paragraph within content block. Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
        Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis
        felis. </p>
    </div>
    <div class="block-footer">Block Footer</div>

    <div class="block-title block-title-large">Block Title Large</div>
    <div class="block block-strong">
      <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis
        tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
    </div>

    <div class="block-title block-title-medium">Block Title Medium</div>
    <div class="block block-strong">
      <p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem. Suspendisse molestie velit vitae mattis
        tincidunt. Ut sit amet quam mollis, vulputate turpis vel, sagittis felis. </p>
    </div>
  </div>
</div>